'use client';

import React, { useEffect, useState } from 'react';

export default function TechHud() {
  const [randomNumbers, setRandomNumbers] = useState<string[]>([]);
  
  // 生成随机二进制字符串
  useEffect(() => {
    const generateRandomNumbers = () => {
      const numbers = [];
      for (let i = 0; i < 10; i++) {
        numbers.push(Math.random().toString(2).substring(2, 10));
      }
      return numbers;
    };
    
    // 初始化随机数
    setRandomNumbers(generateRandomNumbers());
    
    // 定期更新随机数
    const interval = setInterval(() => {
      setRandomNumbers(generateRandomNumbers());
    }, 2000);
    
    return () => clearInterval(interval);
  }, []);
  
  return (
    <div className="absolute inset-0 pointer-events-none select-none">
      {/* 上方横线 */}
      <div className="absolute top-5 left-1/2 transform -translate-x-1/2 w-32 h-0.5 bg-white opacity-50"></div>
      
      {/* 左上角装饰 */}
      <div className="absolute top-5 left-5">
        <div className="relative">
          <div className="w-12 h-12 border border-white opacity-40 rounded-full"></div>
          <div className="absolute top-0 left-0 w-12 h-6 border-t border-l border-white opacity-40 rounded-tl-lg"></div>
          <div className="absolute text-xs text-white opacity-60 top-2 left-4">01</div>
        </div>
      </div>
      
      {/* 右上角数字 */}
      <div className="absolute top-3 right-3 text-xs text-white opacity-50 text-right">
        {randomNumbers.slice(0, 3).map((num, index) => (
          <div key={index}>{num}</div>
        ))}
      </div>
      
      {/* 右下角装饰 */}
      <div className="absolute bottom-3 right-3 text-xs text-white opacity-50 text-right">
        <div className="border border-white opacity-40 p-1 rounded">
          <div>SYS.DATA</div>
          <div>{new Date().toLocaleTimeString()}</div>
        </div>
      </div>
      
      {/* 左下角装饰 */}
      <div className="absolute bottom-3 left-3 text-xs text-white opacity-50">
        {randomNumbers.slice(3, 5).map((num, index) => (
          <div key={index}>{num}</div>
        ))}
      </div>
      
      {/* 中心装饰环 */}
      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 rounded-full border border-white opacity-10 animate-pulse"></div>
      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-72 h-72 rounded-full border border-white opacity-10 animate-spin-slow"></div>
    </div>
  );
} 